<template>
  <a-layout id="app-layout-sider">
    <a-layout-sider
      v-model="collapsed"
      theme="light"
      class="layout-sider"
      width="120"
    >
      <div class="logo">
        <img class="pic-logo" src="~@/assets/logo.png">
      </div>
      <a-menu
        class="menu-item"
        theme="light"
        mode="inline"
        :selectedKeys="[current]"
        @click="menuHandle"
      >
        <a-menu-item v-for="(menuInfo, index) in menu" :key="index">
          {{ menuInfo.title }}
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout style="text-align: left; height: 100%; overflow-y: auto;background-color: #fff;padding: 5px">
      <router-view/>
    </a-layout>
  </a-layout>
</template>
<script>

  export default {
    name: 'AppSider',
    data() {
      return {
        collapsed: true,
        current: 'map',
        menu: {
          'map': {
            title: '精灵图鉴',
            pageName: 'Map'
          },
          'property': {
            title: '属性克制',
            pageName: 'Property'
          }
        }
      };
    },
    created() {
    },
    mounted() {
      this.menuHandle()
    },
    methods: {
      menuHandle(e) {
        this.current = e ? e.key : this.current;
        const linkInfo = this.menu[this.current]
        this.$router.push({name: linkInfo.pageName, params: linkInfo.params})
      }
    },
  };
</script>
<style lang="less" scoped>
  ::-webkit-scrollbar {
    width: 0;
  }

  // 嵌套
  #app-layout-sider {
    height: 100%;
    overflow-y: auto;

    .pic-logo {
      height: 32px;
      margin: 10px;
    }

    .layout-sider {
      border-top: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
    }

    .menu-item {
      .ant-menu-item {
        background-color: #fff;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 0 0px !important;
      }
    }

    .layout-content {
      //background-color: #fff;
    }
  }
</style>
